<html>
<head>
<title>wattscleverlogger4linux-2</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<!--[if IE]>
   <script src="excanvas.compiled.js" type="text/javascript"></script>
<![endif]-->
<style>
a { color: #F6B620; text-decoration: none; border-bottom: 1px dotted #F6B620; }
a:hover { border: 1px dotted #FFEE40; }
html, body, table { margin: 0; padding: 0; color: #c0bcb0; font: normal 12px Verdana; }
body { text-align: left; margin: 1em 10 10 20; }
body.home { background: #474642; }
body.home h1 { font: bold 36px/.8em Slyphaen, Times, serif; color: #F6B620; letter-spacing: -.025em; border-bottom: 3px solid #F6B620; padding: 0; clear: both; text-align: left; }
body.home h2 { font: normal 24px/.8em Slyphaen, Times, serif; color: #DFB020; letter-spacing: -.025em; padding: 0; clear: both; margin: 20 0 10 0; }
body.home p { padding: 10px; clear: both; }
input { font: bold 12px Arial; }
</style>
</head>
<body class="home">
<div id="instant_power" style="width: 100%; height: 250px"></div><br>
<div id="hourly_power" style="width: 100%; height:  400px"></div><br>
<div id="history_power" style="width: 100%; height: 400px"></div><br>
<div id="detailed_close""></div>
<div id="detailed_power" style="width: 100%; height: 400px"></div><br>

<script type="text/javascript">
var chart1, chart2, chart3, chart4;
var last_realtime_data = 0;
var num_realtime_points = 0;

Highcharts.setOptions({ global: { useUTC: false } });


function request_realtime_data() { 
	$.ajax({
	  url: 'get_data.cgi?charttype=realtime&s='+last_realtime_data,
	  dataType: "json",
	  cache: false,
	   success: function(data) {
		var cutoff = new Date().getTime() - (10 * 60 * 1000); // 10 minutes
		while ((chart1.series[0].data[0]) && (chart1.series[0].data[0].x < cutoff)) {
			chart1.series[0].data.shift();
		 }
		 while ((chart1.series[1].data[0]) && (chart1.series[1].data[0].x < cutoff)) {
			chart1.series[1].data.shift();
		 }

		if (data) {
			  var num_readings = data.length - 1;
			  for(var i=0;i<=num_readings;i++) 
			   {
				num_realtime_points++;
				chart1.series[0].addPoint([(data[i][0]*1000),data[i][1]], false); // Watts
				chart1.series[1].addPoint([(data[i][0]*1000),data[i][2]], false); // Temp
			   }
                          chart1.series[0].chart.redraw();
			   if (num_readings > 0) last_realtime_data = data[num_readings][0];
			  } // if data  
		//setTimeout("request_realtime_data()",10000);
	  }, // end success
          
	  error: function(jqXHR, textStatus) 
					{
					alert( "Request failed: " + textStatus + "\nYou might not have CGI Scripts enabled in Apache" );
					}
	});// end ajax
}

function request_history_data(charttype,stime,etime,chosen_chart) { 
	$.ajax({
	  url: 'get_data.cgi?charttype='+charttype+'&s='+stime+'&e='+etime,
	  dataType: "json",
	  cache: false,
	  success: function(data) 
		{
		if (data) {
			  var num_readings = data.length - 1;
			  for(var i=0;i<=num_readings;i++) 
				{
				chosen_chart.series[0].addPoint([(data[i][0]*1000),(data[i][1]/1000)], false, false);
				chosen_chart.series[1].addPoint([(data[i][0]*1000),data[i][2]], false, false);
				//chosen_chart.series[1].addPoint([(data[i][0]*1000),data[i][3]], false, false);
				//chosen_chart.series[1].addPoint([(data[i][0]*1000),data[i][4]], false, false);
				}
			 chosen_chart.series[0].chart.redraw();
			 }
	  	},  //success
	   error: function(jqXHR, textStatus)
                                        {
                                        alert( "Request failed: " + textStatus );
                                        }
	
	});
}

function show_instantaneous() {
	chart1 = new Highcharts.Chart({
		chart: { renderTo: 'instant_power', margin: [50, 50, 60, 50], backgroundColor: '#000000' },
		title: { text: 'Instantaneous (current) Power Consumption (realtime energy consumption)', style: { color: '#FFEE40' }},
		legend: { enabled: false },
		tooltip: { formatter: function() { return '<b>'+this.series.name+'</b> '+Highcharts.dateFormat('%d-%b-%Y %H:%M:%S',this.x)+' <u>'+this.y+' '+(this.series.name=='Temperature'?' C':'W')+'</u>'; }},
		xAxis: { type: 'datetime', title: { text: null }, labels: { style: { color: '#F6B620' } } },
		yAxis: [{title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' W'; } } },
			{title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' C'; } }, opposite: true, min: 5, max: 35 } ],
		series: [{ name: 'Instantaneous Energy Used', type: 'area', data: [] },
			 { name: 'Temperature', type: 'line', yAxis: 1, data: [] }]
		});
	request_realtime_data();
}

function show_daily() {
	chart2 = new Highcharts.Chart({
		chart: { renderTo: 'history_power', zoomType: 'x', defaultSeriesType: 'column', backgroundColor: '#000000', margin: [80, 50, 60, 50], events: { selection: function(event) { switch_from_daily_to_hourly(event); return false; } } },
		title: { text: 'Daily Power Consuption (KWh/day)', style: { color: '#FFEE40' }},
		subtitle: { text: 'Click and drag to zoom and show hourly consumption', style: { color: '#F6B620'} },
		legend: { enabled: false },
		tooltip: { formatter: function() { return '<b>'+this.series.name+'</b> '+Highcharts.dateFormat('%d-%b-%Y',this.x)+' <u>'+this.y+' '+(this.series.name=='Temperature'? ' C':'KWh')+'</u>'; }},
		plotOptions: { column: { pointPadding: 0.2, borderWidth: 1, borderRadius: 2 } },
		xAxis: { type: 'datetime', title: { text: null }, tickInterval: 86400000, showFirstLabel: true, labels: { style: { color: '#F6B620' }, align: 'right', rotation: 330, formatter: function() { return Highcharts.dateFormat('%d-%b-%Y',this.value); } } },
		yAxis: [{title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' KWh'; } } },
			{title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' C'; } }, opposite: true, min: 5, max: 35 } ],
		series: [{ name: 'Energy Used', type: 'column', data: [] },
			 { name: 'Temperature', type: 'line', yAxis: 1, data: [] }]
		});
	var now = new Date().getTime() / 1000;
	request_history_data('daily',0,now,chart2);
}



function return_to_daily() {
	$('#detailed_power').hide();
	$('#detailed_close').html("");
	$('#history_power').show();
}

function switch_from_daily_to_hourly(event) {
        var extremesObject = event.xAxis[0], min = extremesObject.min, max = extremesObject.max;
	$('#history_power').hide();
	$('#detailed_power').show();
	$('#detailed_close').html("<b>Showing hourly KWh readings between "+ (new Date(min).toTimeString()) + " and " + (new Date(max).toTimeString()) + ".  <a href='javascript:return_to_daily();'>[close]</a></b>");
	chart3 = new Highcharts.Chart({
		chart: { renderTo: 'detailed_power', zoomType: 'x', defaultSeriesType: 'column', backgroundColor: '#000000', margin: [80, 50, 60, 50] },
		title: { text: 'Hourly Power Consuption (KWh)', style: { color: '#FFEE40' }},
		subtitle: { text: 'Click and drag in the plot area to zoom and gather more detailed (hourly consumption) information', style: { color: '#F6B620'} },
		legend: { enabled: false },
		tooltip: { formatter: function() { return '<b>'+this.series.name+'</b> '+Highcharts.dateFormat('%d-%b-%Y %I%p',this.x)+' <u>'+this.y+' '+(this.series.name=='Temperature'?' C':'KWh')+'</u>'; }},
		plotOptions: { column: { pointPadding: 0.2, borderWidth: 1, borderRadius: 1 } },
		xAxis: { type: 'datetime', title: { text: null }, labels: { style: { color: '#F6B620' }, align: 'right', rotation: 330, formatter: function() { return Highcharts.dateFormat('%d-%b-%Y<br>%I%p',this.value); } } },
		yAxis: [{title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' KWh'; } } },
			{title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' C'; } }, opposite: true, min: 5, max: 35 } ],
		series: [{ name: 'Energy Used', type: 'column', data: [] },
			 { name: 'Temperature', type: 'line', yAxis: 1, data: [] }]
		});
	request_history_data('hourly',(min/1000),(max/1000),chart3);
}

function show_hourly() {
        chart4 = new Highcharts.Chart({
                chart: { renderTo: 'hourly_power', zoomType: 'x', defaultSeriesType: 'column', backgroundColor: '#000000', margin: [80, 50, 60, 50] },
                title: { text: 'Hourly Power Consuption (KWh)', style: { color: '#FFEE40' }},
                subtitle: { text: 'Looks back over the past 7 days', style: { color: '#F6B620'} },
                legend: { enabled: false },
                tooltip: { formatter: function() { return '<b>'+this.series.name+'</b> '+Highcharts.dateFormat('%d-%b-%Y %I%p',this.x)+' <u>'+this.y+' '+(this.series.name=='Temperature'?' C':'KWh')+'</u>'; }},
                plotOptions: { column: { pointPadding: 0.2, borderWidth: 1, borderRadius: 2 } },
                xAxis: { type: 'datetime', title: { text: null }, labels: { style: { color: '#F6B620' }, align: 'right', rotation: 330, formatter: function() { return Highcharts.dateFormat('%d-%b-%Y<br>%I%p',this.value); } } },
                yAxis: [{title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' KWh'; } } },
                        {title: { text: null }, labels: { style: { color: '#F6B620' }, formatter: function() { return this.value + ' C'; } }, opposite: true, min: 5, max: 35 } ],
                series: [{ name: 'Energy Used', type: 'column', data: [] },
                         { name: 'Temperature', type: 'line', yAxis: 1, data: [] }]
                });
        var now = new Date().getTime() / 1000;
	var seven_days_back = new Date().getTime()/1000 - (7 * 24 * 60 *60);
        request_history_data('hourly',seven_days_back,now,chart4);
}



$(document).ready( function() { show_instantaneous(); show_hourly(); show_daily(); });
</script>

<p>
<hr>
<a href="http://code.google.com/p/wattscleverlogger4linux-2/">wattscleverlogger4linux-2 home</a>
</html>
</body>
</html>
